<template>
  <div style="position: relative;">
    <canvas class="chart" ref="el"></canvas>
  </div>
</template>

<script name="Echarts" setup>
//import debounce from 'lodash_debounce';
import {onMounted,ref,onBeforeUnmount,watch} from 'vue'
import 'chart';
defineOptions({
  name:'Chart'
})

const el=ref(null)
const props=defineProps({
  options: {
    type: Object,
    default: {}
  },
  type:{
    type:String,
    default:"line"
  },
  data:{
    type:Object,
    default:{}
  }
})
const emit=defineEmits(['init'])
let chart=null

defineExpose({
  getChart(){
    return chart;
  }
})
let rth=null
// const resizeHandler=()=>{
//   clearTimeout(rth)
//   rth=setTimeout(()=>{
//     chart.resize()
//   },10)
// }
onMounted(_=>{
  chart = new Chart(el.value,{
    type:props.type,
    options:props.options,
    data:props.data
  })//echarts.init(el.value, theme, props.initOption);
  // chart.setOption(props.options);
  // chart.resize();
  // window.addEventListener('resize',resizeHandler)
  emit("init",chart)
})
onBeforeUnmount(_=>{
  //window.removeEventListener('resize', resizeHandler);
  //chart.dispose()
})
watch(()=>props.options,(v)=>{
  chart.options=v
  chart.update();
})
watch(()=>props.data,(v)=>{
  chart.data=v
  chart.update();
})
</script>
<style>
.echarts-vue {
  height: 400px;
  overflow: hidden;
}
</style>
